<!-- eslint-disable no-undef -->
<!--
 * @Description: 设置属性面板
 * @Author: zhangwei
 * @Date: 2022-08-20 16:57:09
 * @LastEditTime: 2022-11-14 10:51:01
 * @LastEditors: zw 775925302@qq.com
-->

<template>
  <el-tabs v-if="isSelectWidget" v-model="activeName" class="ml-1 mr-1">
    <el-tab-pane label="属性" name="attr">
      <div class="fontBold fontTitle marginTopHalf marginLeftHalf">{{ getSelectWidgetName }}组件:</div>
      <el-form ref="form" label-width="120px" class="paddingTop" :model="designSelectedWidget.attts" size="small">
        <component
          v-for="(item, index) in getAttrsBase"
          :key="index"
          :is="item.component"
          :config="item"
          :data="designSelectedWidget.attrs"
        />

        <!-- <el-collapse v-if="getAttrsMore.length > 0">
          <el-collapse-item title="更多属性">
            <el-form-item
              v-for="(item, index) in getAttrsMore"
              :key="index"
              :label="item.name + ':'"
              :prop="item.key"
            >
              <component :is="item.component" :mdata="item" />
            </el-form-item>
          </el-collapse-item>
        </el-collapse> -->
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="行为" name="action"> </el-tab-pane>
    <el-tab-pane label="样式" name="style">
      <StylePanel :widget="designSelectedWidget"></StylePanel>
    </el-tab-pane>
    <el-tab-pane label="页面组件视图" name="view"> </el-tab-pane>
    <el-tab-pane label="页面配置" name="page">
      <PageConfig />
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts">
import { ref, computed, inject, defineComponent } from "vue";
import { designEditKey, EventSelectWidget } from "@/hooks/lowcode/keys";
import type { TypeDesignProvide, TypeWidget } from "@/types/TypeDesign";

import PageConfig from "./PageConfig.vue";
import AttrPanel from "./AttrPanel.vue";
import StylePanel from "./StylePanel.vue";
import { useI18n } from "vue-i18n";

export default defineComponent({
  components: {
    PageConfig,
    AttrPanel,
    StylePanel,
  },
  setup() {
    const { t } = useI18n();
    const { designSelectedWidget } = inject(designEditKey) as TypeDesignProvide;
    const getAttrsMore = computed(() => {
      return [];
    });

    const getAttrsBase = computed(() => {
      let bases = [];
      if (designSelectedWidget.value.attrWidgets && designSelectedWidget.value.attrWidgets.length > 0) {
        bases = designSelectedWidget.value.attrWidgets.filter((item) => item.pos === "base");
      }
      return bases;
    });

    /**
     *  获取当前组件的名称
     */
    const getSelectWidgetName = computed(() => {
      return designSelectedWidget.value.name;
    });

    /**
     *  判断当前是否有组件被选中
     */
    const isSelectWidget = computed(() => {
      return designSelectedWidget.value;
    });

    const activeName = ref("style");

    return {
      activeName,
      isSelectWidget,
      getSelectWidgetName,
      getAttrsBase,
      getAttrsMore,
      designSelectedWidget,
      t,
    };
  },
});

// emitter.on(EventSelectWidget, (_widget: any) => {
//   selectWidget.value = _widget;
//   console.log("on-------->")
// });
</script>

<style scoped scss></style>
